<template>
  <div>
    <h1 @click="generateReport">html转pdf</h1>
    <vue-html2pdf
      :show-layout="false"
      :float-layout="true"
      :preview-modal="true"
      filename="hee hee"
      :pdf-quality="2"
      :manual-pagination="true"
      pdf-format="a4"
      @progress="onProgress($event)"
      @hasStartedGeneration="hasStartedGeneration($event)"
      @hasGenerated="hasGenerated($event)"
      ref="html2Pdf"
      @startPagination="startPagination($event)"
      @hasPaginated="hasPaginated"
    >
      <section slot="pdf-content" style="padding: 0 30px">
        <!-- PDF Content Here -->

        <ul style="padding: 0; margin: 0 auto; background-color: darkblue">
          <li style="list-style: none" v-for="item of 9" :key="item">
            <p style="margin: 10px; background-color: aqua">
              {{ item }}我是哈哈哈{{ item }}
            </p>
          </li>
        </ul>
      </section>
    </vue-html2pdf>
  </div>
</template>
<script>
import VueHtml2pdf from "vue-html2pdf";

export default {
  methods: {
    onProgress(e) {
      console.log("onProgress");
      // console.log(e);
    },
    startPagination(e) {
      console.log("startPagination");
      console.log(e);
    },
    hasPaginated(e) {
      console.log("hasPaginated");
      console.log("e", e);
    },
    /*
            Generate Report using refs and calling the
            refs function generatePdf()
        */
    generateReport() {
      this.$refs.html2Pdf.generatePdf();
    },
  },
  components: {
    VueHtml2pdf,
  },
};
</script>
